<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules, ElMessage, UploadProps } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { $DoctorDetail } from '@/api/doctor'

const emit = defineEmits(['close-modal', 'confirm-modal'])
//隐藏弹框
const closeModal = () => {
    emit('closeModal')
}
// 确认
const confirmModal = (formEl: FormInstance | undefined, ruleForm) => {
    emit('confirmModal', formEl, ruleForm)
}

const props = defineProps({
    text: {
        type: String,
        default: ''
    },
    id: {
        type: Number,
        default: 0
    }
})

onMounted(() => {
    if (ruleForm.id) {
        $DoctorDetail(ruleForm).then(res => {
            console.log(res.data);

            Object.assign(ruleForm, res.data);
        })
    }
})

// 定义表格接口
interface RuleForm {
    id: number
    name: string
    position: string
    department: number
    url: string
    time: string
    good: string
    introduction: string
}

// const imageUrl = ref('')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    id: props.id,
    name: '',
    position: '',
    department: null,
    url: '',
    time: '',
    good: '',
    introduction: ''
})
// 规则
const rules = reactive<FormRules<RuleForm>>({
    text: [
        { required: true, message: '内容未填写', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '内容未填写', trigger: 'blur' },
    ],
    position: [
        { required: true, message: '内容未填写', trigger: 'blur' },
    ],
    department: [
        { required: true, message: '类型未选择', trigger: 'change', },
    ],
    url: [
        { required: true, message: '内容未填写', trigger: 'blur' },
    ],
    time: [
        { required: true, message: '内容未填写', trigger: 'blur' },
    ],
    good: [
        { required: true, message: '内容未填写', trigger: 'blur' },
    ],
    introduction: [
        { required: true, message: '内容未填写', trigger: 'blur' },
    ],

})

// 重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    ruleForm.url = ''
}

// 图片上传成功后
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    ruleForm.url = response.data
}

// 图片上传前验证
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        alert("图片格式不是jpg")
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        alert("图片大小不能超过2MB")
        return false
    }
    return true
}
</script>

<template>
    <div class="doctor">
        <div class="doctor-content" :style="{ height: text == '编辑' ? '785px' : '725px' }">
            <div class="doctor-top">{{ text }}
                <button class="close" @click="closeModal">&times;</button>
            </div>
            <div class="doctor-body">
                <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                    class="demo-ruleForm" status-icon>
                    <el-form-item label="id" v-if="text == '编辑'">
                        <el-input v-model="ruleForm.id" disabled />
                    </el-form-item>
                    <el-form-item label="名字" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入名字" />
                    </el-form-item>
                    <el-form-item label="职位" prop="position">
                        <el-input v-model="ruleForm.position" placeholder="请输入职位" />
                    </el-form-item>
                    <el-form-item label="科室" prop="department">
                        <el-select v-model="ruleForm.department" placeholder="请选择科室">
                            <el-option label="内科" :value="0" />
                            <el-option label="外科" :value="1" />
                            <el-option label="儿科" :value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="头像">
                        <el-upload class="avatar-uploader" action="http://localhost:8085/abmin/adverseImage"
                            :show-file-list="false" :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="ruleForm.url" :src="ruleForm.url" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="排班" prop="time">
                        <el-input v-model="ruleForm.time" type="textarea"
                            placeholder="提示：“10”就是星期一上午，“21”就是星期二中午，“32”就是星期三下午" resize="none" />
                    </el-form-item>
                    <el-form-item label="擅长" prop="good">
                        <el-input v-model="ruleForm.good" type="textarea" placeholder="请输入擅长" resize="none" />
                    </el-form-item>
                    <el-form-item label="自我介绍" prop="introduction">
                        <el-input v-model="ruleForm.introduction" type="textarea" placeholder="请输入自我介绍" resize="none" />
                    </el-form-item>
                    <el-form-item>
                        <div class="btn">
                            <el-button type="primary" @click="confirmModal(ruleFormRef, ruleForm)">
                                确定
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.doctor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    .doctor-content {
        background-color: #fff;
        border-radius: 10px;
        height: 725px;
        width: 600px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        animation: slideDown 0.1s ease-out;

        .doctor-top {
            text-align: center;
            height: 50px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background: #408cff;
            color: #fff;
            padding: 15px 0;

            .close {
                padding: 0;
                padding-right: 10px;
                margin-top: -7px;
                background: transparent;
                border: 0;
                float: right;
                font-size: 21px;
                color: #fff;
                line-height: 1;
                font-weight: bold;
                cursor: pointer;
            }
        }

        .doctor-body {
            display: flex;
            align-items: center;
            flex-direction: column;
            text-align: center;
            padding: 40px 20px;
            color: #333;
            font-size: 14px;

            .el-form-item {
                width: 400px;

                .btn {
                    display: flex;
                    width: 100%;
                    justify-content: center;
                    // align-items: center;
                }

                :deep(.el-textarea__inner) {
                    height: 80px;
                }

                :deep(.avatar-uploader .el-upload) {
                    border: 1px dashed var(--el-border-color);
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    transition: var(--el-transition-duration-fast);
                }

                :deep(.avatar-uploader .el-upload):hover {
                    border-color: var(--el-color-primary);
                }

                .el-icon.avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 100px;
                    height: 100px;
                    text-align: center;
                }

                :deep(.avatar-uploader .avatar) {
                    width: 100px;
                    height: 100px;
                    display: block;
                }
            }
        }
    }
}

// 动画
@keyframes slideDown {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}
</style>